<template>
    <div>
        <el-button type="primary" @click="handleEdit">新增</el-button>

        <span v-for="(condition, index) in query.SearchConditions">
            <span v-for="conditionModel in condition.ConditionalModels">
                <span v-if="condition.ControlType == 5">
                    <span v-if="conditionModel.FieldName.endsWith('SplitStart')">{{ condition.Label }}：</span>
                    <el-date-picker v-model="conditionModel.FieldValue" type="date" placeholder="日期"
                        value-format="YYYY-MM-DD" />
                    <span v-if="conditionModel.FieldName.endsWith('SplitStart')">~</span>
                    <!-- ~<el-date-picker v-model="condition.FieldValue" type="date" placeholder="结束日期"
                    value-format="YYYY-MM-DD" /> -->
                </span>
                <el-input v-else @keyup.enter="getDataList" v-model="conditionModel.FieldValue" :key="index"
                    style="width: 240px;margin:4px 6px;" clearable :placeholder="condition.Label" />
            </span>
        </span>
        <el-button type="primary" @click="getDataList">查询</el-button>
        <el-button @click="resetQuery">重置</el-button>

    </div>
    <el-table v-loading="isLoading" height="800px" :show-overflow-tooltip="true" :data="tableData">
        <el-table-column v-for="item in bgcolumnNames" :prop="item.Name" :label="item.Label">
            <template #default="scope">
                <template v-if="item.TypeName == 'DateTime' || item.ControlType == 5">{{
                    moment(scope.row[item.Name]).format('YYYY-MM-DD HH:mm:ss') }}</template>
                <template v-else>{{ scope.row[item.Name] }}</template>
                <!-- {{ scope.row[item.Name] }} -->
            </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="180">
            <template #default="scope">
                <el-button link type="primary" @click="handleEdit(scope.row)" size="small">编辑</el-button>
                <el-button link type="primary" @click="onCopy(scope.row)" size="small">复制</el-button>
                <el-popconfirm title="确定删除?" @confirm="handleDelete(scope.row)">
                    <template #reference>
                        <el-button link type="danger" size="small">删除</el-button>
                    </template>
                </el-popconfirm>
            </template>
        </el-table-column>
    </el-table>

    <EditDialog ref="dialogRef" @confirm="onConfirm" :bgcolumnNames="bgcolumnNames"></EditDialog>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue';
import { ElMessage } from 'element-plus'
import moment from 'moment';

import EditDialog from '../components/EditDialog.vue';
import api from '../api'
const query = reactive({
    pageIndex: 1,
    pageSize: 30,
    SearchConditions:[{"Label":"SchoolId","ConditionalModels":[{"FieldName":"SchoolId","FieldValue":null,"CSharpTypeName":"Nullable`1","CustomConditionalFunc":null,"CustomParameterValue":null,"ConditionalType":0}],"ControlType":2},{"Label":"Name","ConditionalModels":[{"FieldName":"Name","FieldValue":null,"CSharpTypeName":"String","CustomConditionalFunc":null,"CustomParameterValue":null,"ConditionalType":1}],"ControlType":3},{"Label":"入学时间","ConditionalModels":[{"FieldName":"EnrollmentTime","FieldValue":null,"CSharpTypeName":"Nullable`1","CustomConditionalFunc":null,"CustomParameterValue":null,"ConditionalType":0}],"ControlType":5}]
})
var isLoading = ref(false)
var tableData = ref([])
const dialogRef = ref<InstanceType<typeof EditDialog>>();
var bgcolumnNames=[{"Name":"SchoolId","Order":100,"Label":"SchoolId","ControlType":2,"TypeName":"Nullable`1","IsShow":true,"IsEditable":true,"IsNullable":true,"EnumDic":null},{"Name":"Name","Order":100,"Label":"Name","ControlType":3,"TypeName":"String","IsShow":true,"IsEditable":true,"IsNullable":true,"EnumDic":null},{"Name":"EnrollmentTime","Order":100,"Label":"入学时间","ControlType":5,"TypeName":"Nullable`1","IsShow":true,"IsEditable":true,"IsNullable":true,"EnumDic":null}]


onMounted(async () => {
    try {
        getDataList()
        // const data = await $api.get('/your-api-endpoint');
        // 使用获取的数据
    } catch (error) {

    }
});

const resetQuery = () => {
    console.log('reset', query.SearchConditions)
    query.SearchConditions.forEach(item => {
        item.ConditionalModels.forEach(modelItem => {
            modelItem.FieldValue = null
        })
    })
    getDataList()
}
const onCopy = async item => {
    var copyItem = JSON.parse(JSON.stringify(item));
    copyItem.Id = 0
    dialogRef.value.open(copyItem)
}
const handleEdit = async (item) => {
    var editItem = JSON.parse(JSON.stringify(item));
    dialogRef.value.open(editItem)
}
// 定义方法
const getDataList = async () => {
    isLoading.value = true
    var res = await api.post('Student/List', query)
    isLoading.value = false
    var data = res.Data
    tableData.value = data.list
    // bgcolumnNames = data.columnNames

};

/**
 * 确认并更新模板信息
 * 无参数
 * 无明确返回值，但会通过控制台输出和界面提示更新结果
 */
const onConfirm = async (item) => {
    // 提交编辑中的模板信息至服务器

    var res = await api.post('Student/Update', item)

    // 根据服务器返回代码判断操作成功与否
    if (res.Code == 200) {
        //隐藏对话框
        dialogRef.value.close()
        // 成功更新，显示成功消息并刷新列表
        ElMessage({
            message: res.Message,
            type: 'success',
        })
        getDataList()
    }
}
const handleDelete = async item => {

    item.isDeleted = true
    var res = await api.post('Student/Update', item)
    if (res.Code == 200) {
        // 成功更新，显示成功消息并刷新列表
        ElMessage({
            message: "删除成功",
            type: 'success',
        })
        getDataList()
    }
}


</script>

<style>
.CodeMirror {
    margin-right: 100px;
}

.CodeMirror-sizer {
    min-width: 500px !important;
}

.el-dialog__body {
    overflow: auto;
    max-height: 500px;
}
</style>